<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3">
        <div>
          <el-input v-model="one" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-input v-model="two" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="1">
        <div>
          <el-button type="primary" @click="calculate(one, two)">=</el-button>
        </div>
      </el-col>
      <el-col :span="6">
        {{ result }}
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "jia",
  data() {
    return {
      one: '',
      two: '',
      result: '',
      options: [{
        value: '1',
        label: '+'
      }, {
        value: '2',
        label: '-'
      }, {
        value: '3',
        label: '*'
      }, {
        value: '4',
        label: '/'
      }],
      value: ''
    }
  },
  methods: {
    calculate(one, two) {
      // 校验
      if (this.one === '' && this.two === '') {
        this.result = '文本框1，2无数字';
        return;
      } else if (this.one === '') {
        this.result = '文本框1无数字';
        return;
      } else if (this.two === '') {
        this.result = '文本框2无数字';
        return;
      }
      // 校验不是非数字
      if (isNaN(this.one) && isNaN(this.two)) {
        this.result = '文本框1，2不是数字';
        return;
      } else if (isNaN(this.one)) {
        this.result = '文本框1不是数字';
        return;
      } else if (isNaN(this.two)) {
        this.result = '文本框2不是数字';
        return;
      }
      // 校验超出数字范围
      if (this.one > 1000000000 && this.two > 1000000000) {
        this.result = '文本框1，2超出数字范围';
        return;
      } else if (this.one > 1000000000) {
        this.result = '文本框1超出数字范围';
        return;
      } else if (this.two > 1000000000) {
        this.result = '文本框2超出数字范围';
        return;
      }
      const data = {
        one: this.one,
        two: this.two
      };
      console.log(one, two);
      if (this.value === '1') {
        console.log('+');
        axios.post('http://localhost:9000/math/add', data).then((res) => {
          console.log(res);
          this.result = res.data;
        })
      }
      if (this.value === '2') {
        console.log('-');
        axios.post('http://localhost:9000/math/jian', data).then((res) => {
          console.log(res);
          this.result = res.data;
        })
      }
      if (this.value === '3') {
        console.log('*');
        axios.post('http://localhost:9000/math/mult', data).then((res) => {
          console.log(res);
          this.result = res.data;
        })
      }
      if (this.value === '4') {
        console.log('/');
        axios.post('http://localhost:9000/math/div', data).then((res) => {
          console.log(res);
          this.result = res.data;
        })
      }
    }
  }
}
</script>

<style scoped>

</style>